<template>
  <!-- 设备管理 -->
  <div class="equipment-list">
    <div class="btns" style="padding:1em 0 1em 1em;margin-bottom:1em;background:#fff;position:relative;">
      <el-select v-model="searchForm.projectId" @change="proSelectChange" placeholder="选择项目" filterable clearable>
        <el-option v-for="item in options.projects" :keys="item.id" :label="item.projectName" :value="item.id" />
      </el-select>
      <el-select v-model="searchForm.contractId" placeholder="选择合同" filterable clearable>
        <el-option v-for="item in options.contracts" :keys="item.id" :label="item.contractNo" :value="item.id"/>
      </el-select>
      <el-input v-model="searchForm.name" name="name" placeholder="设备名"></el-input>
      <el-date-picker
        style="margin-left: 8px"
        v-model="searchForm.time"
        unlink-panels
        value-format="timestamp"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button @click="toSearch" type="primary" icon="el-icon-search" size="small" style="margin: 4px 0 0 6px" >查询</el-button>
    </div>
    <div class="left-collapse">
      <a-collapse accordion>
        <a-collapse-panel :header="header">
          <!--      合同显示布局区域   -->
          <a-descriptions size="small" :column="{ xxl: 8, xl: 6, lg: 4, md: 2, sm: 1, xs: 1 }">
            <a-descriptions-item label="付款方式">{{contractAttribute.paymentMethod}}</a-descriptions-item>
            <a-descriptions-item label="录入人">{{ contractAttribute.sendOperator }}</a-descriptions-item>
            <a-descriptions-item label="应付款">{{ contractAttribute.payable }}</a-descriptions-item>
            <a-descriptions-item label="已付款">
              <el-tag v-if="contractAttribute.id" type="success" >￥{{ contractAttribute.sumMoney }}</el-tag>
<!--              <el-button style="margin-left: 5px" @click="showMoneyDialogInfo" v-if="contractAttribute.id" size="mini" icon="el-icon-plus"></el-button>-->
            </a-descriptions-item>
            <a-descriptions-item label="预定到货时间">{{ contractAttribute.schedulerPayTime }}</a-descriptions-item>
            <a-descriptions-item label="预定付款时间">{{ contractAttribute.payableTime }}</a-descriptions-item>
            <a-descriptions-item label="履约金">{{ contractAttribute.bond }}</a-descriptions-item>
            <a-descriptions-item label="状态">
            </a-descriptions-item>
            <a-descriptions-item label="发票状态">
              <el-tag v-if="contractAttribute.invoiceNumber > 0" type="success" >有</el-tag>
<!--              <el-tag @click="openImgShowDialog" v-if="contractAttribute.invoiceNumber > 0" type="success" >有</el-tag>-->
              <el-tag @click="openImgShowDialog" v-if="contractAttribute.invoiceNumber < 1" type="error">无</el-tag>
<!--              <el-tag  type="contractAttribute.invoiceNumber < 1 ? 'status[0]['type']':'status[2]['type']'">无</el-tag>-->
            </a-descriptions-item>
            <a-descriptions-item :span="2" label="履约金支付时间">{{ contractAttribute.bondTime}}</a-descriptions-item>
            <a-descriptions-item :span="2" label="履约金归还时间">{{ contractAttribute.bondReturnTime }}</a-descriptions-item>
            <a-descriptions-item :span="2" label="合同附件状态">
              {{contractAttribute.contractStatus}}
            </a-descriptions-item>
            <a-descriptions-item :span="4" :col="2" label="备注">{{ contractAttribute.remark }}</a-descriptions-item>
          </a-descriptions>

        </a-collapse-panel>
      </a-collapse>
    </div>

    <div class="left-layout">
    <a-layout>
      <!-- 主要内容 容器 -->
      <a-layout-content :style="margin==0?{}:{marginLeft: '24px'}" class="my-transition" style="padding-left: 1em;">
        <div style="background: #fff;padding: 0 1em" :style="{ minHeight: windowHeight+'px' }">
          <a-tabs default-active-key="1" size="large">
            <a-tab-pane key="1" tab="采购项清单">
              <a-table
                :data-source="purchaseItems"
                size="small"
                :rowKey="record => record.id"
                :loading="purchaseItemsLoading"
                :scroll="purchaseItems.length > 0 ?{ x: 2000}:{}"
              >
                <a-table-column :width="100" align="center" ellipsis="true" fixed="left" key="item" title="设备名" data-index="item" />
                <a-table-column :width="200" align="center" ellipsis="true" fixed="left" key="supplier" title="供应商" data-index="supplier" />
                <a-table-column :width="70" align="center" ellipsis="true" key="number" title="总数量" data-index="number" />
                <a-table-column :width="70" align="center" key="checkNum" title="已签收" data-index="checkNum" />
                <a-table-column :width="70" align="center" key="inspectedNum" title="已验收" data-index="inspectedNum" />
                <a-table-column :width="70" align="center" key="entryNum" title="已入库" data-index="entryNum" />
                <a-table-column :width="70" align="center" key="deliveryNum" title="已出库" data-index="deliveryNum" />
                <a-table-column :width="70" align="center" key="sendNum" title="已送货" data-index="sendNum" />
                <a-table-column :width="100" ellipsis="true" align="center" key="brand" title="品牌" data-index="brand" />
                <a-table-column :width="150" ellipsis="true" align="center" key="model" title="型号" data-index="model" />
                <a-table-column align="center" ellipsis="true" key="params" title="技术参数" data-index="params" />
                <a-table-column :width="100" ellipsis="true" align="center" key="delivery" title="货期" data-index="delivery" />
                <a-table-column :width="100" ellipsis="true" align="center" key="warranty" title="质保期" data-index="warranty" />
                <a-table-column :width="100" ellipsis="true" align="center" key="remark" title="备注" data-index="remark" />
              </a-table>
            </a-tab-pane>
            <!--<a-tab-pane key="2" tab="到货状态">
              <a-table></a-table>
            </a-tab-pane>
            <a-tab-pane key="3" tab="供货清单">
              <a-table></a-table>
            </a-tab-pane>-->
          </a-tabs>
        </div>
      </a-layout-content>
    </a-layout>
    </div>
    <!-- 发票、付款通知单 2级模态框 -->
    <el-dialog v-el-drag-dialog :visible.sync="uploadModal.visible" :title="uploadModal.title" append-to-body>
      <el-form ref="uploadModalForm" :model="uploadModal.form" :rules="rules"  status-icon>
        <el-form-item v-if="contractInfoDialog.title=='供货发票'" label="编号" label-width="80px" size="small" prop="no">
          <el-input v-model="uploadModal.form.no" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="contractInfoDialog.title=='付款通知单'" label="金额" label-width="80px" size="small" prop="money">
          <el-input v-model="uploadModal.form.money" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item v-if="contractInfoDialog.title=='付款通知单'" label="付款时间" label-width="80px" size="small" prop="paymentTime">
          <el-date-picker
            v-model="uploadModal.form.paymentTime"
            value-format="timestamp"
            type="datetime"
            placeholder="选择日期时间"
            default-time="12:00:00">
          </el-date-picker>
        </el-form-item>
        <a-upload
          name="file"
          :action="fileUploadUrl"
          :file-list="fileList"
          :before-upload="beforeUpload"
          @change="uploadStatusChange"
        >
          <a-button> <a-icon type="upload" /> 点击上传 </a-button>
        </a-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="uploadModal.visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="uploadModalHandle">确 定</el-button>
      </div>
    </el-dialog>
    <!--   发票、付款通知单 模态框  -->
    <el-dialog :title="contractInfoDialog.title" :visible.sync="contractInfoDialog.visible" v-el-drag-dialog>
      <div style="margin-bottom: 8px">
        <el-button @click="showUploadModal" size="small" type="primary" icon="el-icon-upload">上传</el-button>
      </div>
      <a-table
        :pagination="false"
        v-loading="contractInfoDialog.tableLoading"
        :data-source="contractInfoDialog.data"
        size="middle"
        :rowKey="(record) => record.id"
      >
        <a-table-column v-if="contractInfoDialog.title=='供货发票'" key="no" data-index="no" title="发票编号" align="center"/>
        <a-table-column v-if="contractInfoDialog.title=='付款通知单'" key="money" data-index="money" title="付款金额" align="center"/>
        <a-table-column v-if="contractInfoDialog.title=='付款通知单'" key="paymentTime" title="付款时间" data-index="paymentTime" align="center">
          <template slot-scope="text, record">
            {{dateTimeFormat(text)}}
          </template>
        </a-table-column>
        <a-table-column v-if="contractInfoDialog.title=='供货发票'" key="url" title="发票文件" align="center">
          <template slot-scope="text, record, index">
            <el-link type="primary" :href="record.image">{{record.no}}</el-link>
          </template>
        </a-table-column>
        <a-table-column key="operator" title="创建人" data-index="operator" align="center"/>
        <a-table-column key="time" title="创建时间" data-index="time" align="center">
          <template slot-scope="text, record">
            {{dateTimeFormat(text)}}
          </template>
        </a-table-column>
      </a-table>
    </el-dialog>
    <!--修改支付信息模态框-->
    <el-dialog v-el-drag-dialog title="修改信息" :visible.sync="editMoneyInfoDialog.visible" width="30%">
      <el-form ref="editMoneyInfoDialogForm" :model="editMoneyInfoDialog.form" status-icon>
        <el-form-item label="支付金额" label-width="80px" size="small" prop="money">
          <a-input-number  v-model="editMoneyInfoDialog.form.money" :precision="2" :step="1" ></a-input-number>
        </el-form-item>
        <el-form-item label="支付人" label-width="80px" size="small" prop="operator">
          <el-input v-model="editMoneyInfoDialog.form.operator" :precision="2" :step="1"/>
        </el-form-item>
        <el-form-item label="支付名目" label-width="80px" size="small" prop="paymentName">
          <el-input v-model="editMoneyInfoDialog.form.paymentName" :precision="2" :step="1"></el-input>
        </el-form-item>
        <el-form-item label="支付时间" label-width="80px" size="small" prop="time">
          <el-date-picker v-model="editMoneyInfoDialog.form.time"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="editMoneyInfoDialog.visible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="editMoneyInfo">确 定</el-button>
      </div>
    </el-dialog>
    <!--付款信息展示模态框-->
    <el-dialog v-el-drag-dialog title="付款记录" :visible.sync="showMoneyDialog.visible" style="width: 1400px;height: 1800px">
      <a-table
        :data-source="moneyItems"
        size="small"
        :rowKey="record => record.id"
        :loading="moneyItemsLoading"
        :scroll="moneyItems.length > 0 ?{ x: 600}:{}"
      >
        <a-table-column :width="60" align="center" key="money" title="金额" data-index="money" />
        <a-table-column :width="60" align="center" key="operator" title="付款人" data-index="operator" />
        <a-table-column :width="60" align="center" key="paymentName" title="付款名目" data-index="paymentName" />
        <a-table-column :width="60" align="center" key="time" title="付款时间" data-index="time" >
          <template slot-scope="text, record">
            {{dateTimeFormat(text)}}
          </template>
        </a-table-column>
        <a-table-column  align="center" :width="140" key="action" title="操作">
          <template slot-scope="text, record, index">
            <el-button @click.native.stop="openEditDialog(record)" icon="el-icon-edit" type="success" size="mini" style="padding: 7px 10px;">修改</el-button>
            <el-button @click.native.stop="deleteMoneyInfo(record, index)" icon="el-icon-delete" type="danger" size="mini" style="padding: 7px 10px;">删除</el-button>
          </template>
        </a-table-column>
      </a-table>
    </el-dialog>
    <!--发票展示模态框-->
    <el-dialog v-el-drag-dialog title="发票明细" :visible.sync="ImgShowDialog.visible">
      <a-table
        :data-source="imgItems"
        size="small"
        :rowKey="record => record.id"
        :loading="imgItemsLoading"
        :scroll="imgItems.length > 0 ?{ x: 600}:{}">
        <a-table-column align="center" header-align="center" label="发票图片">
          <template width="40" slot-scope="scope">
            <el-image :src="'localhost:8081/'+imgItems.image" style="width: 100px; height: 100px"></el-image>
          </template>
        </a-table-column>
      </a-table>
    </el-dialog>
    <!--付款信息登记模态框-->
    <el-dialog v-el-drag-dialog title="付款信息登记" :visible.sync="addMoneyDialog.visible">
      <el-form ref="addMoneyDialogForm" :model="addMoneyDialog.form" status-icon>
        <el-form-item label="支付金额" label-width="80px" size="small" prop="money">
          <a-input-number v-model="addMoneyDialog.form.money" :precision="2" :step="1" ></a-input-number>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import "@/styles/auto-style.css";
  import { getUser } from "@/utils/auth";
  import { getAction, postActionByJson, postActionByQueryString } from "@/api/manage";
  import { dateTimeFormat } from "@/utils/format";
  import { beforeUpload, uploadStatusChange } from '@/utils/upload'
  import elDragDialog from "@/directive/el-drag-dialog";

  export default {
    directives: { elDragDialog },

    watch: {
        /*activeKey(key) {
            console.log(key);
        },*/
    },
    created() {
      this.loadPurchaseProjects()
      this.loadContracts()
    },
    mounted() {
      var that = this;
      // <!--把window.onresize事件挂在到mounted函数上-->
      window.onresize = () => {
        return (() => {
          that.windowHeight = document.documentElement.clientHeight  - 130; // 高
        })()
      };
    },
    data() {
      const fileUploadUrl = process.env.VUE_APP_BASE_API + 'file/uploadCache'

      return {
        options: {
          projects: [],
          contracts: [],
        },
        activeKey: ['1'],
        header: "采购合同信息",
        fileNum: 1,
        uploadKey: true,

        fileList: [],
        fileUploadUrl,


        stockDialog: {
          title: '',
          form: {},
          visible: false
        },
        ImgShowDialog: {
          visible: false
        },
        editMoneyInfoDialog: {
          form: {},
          visible: false
        },
        addMoneyDialog: {
          form: {},
          visible: false
        },
        showMoneyDialog: {
          visible: false
        },

        uploadModal: {
          title: '上传',
          form: {},
          visible: false,
        },
        status: [
          { type: 'error', text: '无' },
          { type: 'success', text: '无' },
        ],

        contractInfoDialog: { // 模态框
          title: null,
          visible: false,
          form: {},
          tableLoading: false,
        },

        moneyItemsLoading: false,
        moneyItems: [],
        imgItems: [],
        imgItemsLoading: false,


        purchaseItemsLoading: false, // 采购项清单table 加载状态
        purchaseItems: [], // 项目下合同信息数据源

        contractAttribute: {contractName:''}, // 合同订单信息
        actualAccounts: 0,

        purchaseProjects: [], // 采购项目
        searchForm: {}, // 搜索form数据源

        windowHeight: document.documentElement.clientHeight - 130, // 页面高度
        margin: 0, // left-sider 移动距离

        rules: {
          no: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          money: [
            { required: true, pattern: /^(\-|\+)?\d+(\.\d+)?$/, message: '格式不正确', trigger: 'blur' }
          ],
          number: [
            { required: true, pattern: /^(\-|\+)?\d+(\.\d+)?$/, message: '格式不正确', trigger: 'blur' }
          ],
          time: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          operator: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      openImgShowDialog(){
        this.ImgShowDialog.visible = true
        getAction('/stock/invoice/findInvoice',{contractId: this.searchForm.contractId})
        .then(resp =>{
          this.imgItems = resp.data
        })
      },
      editMoneyInfo(){
        getAction('/purchase/actualAccount/editMoneyInfo',this.editMoneyInfoDialog.form)
        .then(resp => {
          this.$message.success(resp.message)
          this.showMoneyDialogInfo()
          this.editMoneyInfoDialog.visible = false
        })
      },
      openEditDialog(record){
        let form = this.moneyItems.filter(item=>item.id==record.id)[0]||{}
        this.editMoneyInfoDialog.form = Object.assign({}, form)
        this.editMoneyInfoDialog.visible = true
      },
      deleteMoneyInfo(recode){
        getAction('/purchase/actualAccount/deleteMoneyInfo',{id: recode.id})
          .then(resp =>{
            this.$message.success(resp.message+"已删除"+resp.data+"条数据")
            this.showMoneyDialogInfo()
          })
      },
      stockDialogHandle(form) {
        this.$refs[form].validate((valid) =>{
          if (valid) {
            let url = ''
            let form = {}

            if (this.stockDialog.title == '签收') {
              url = '/stock/check/sign'
              form = {
                itemId: this.stockDialog.form.itemId,
                checkNumber: this.stockDialog.form.number,
                checkTime: this.stockDialog.form.time,
                checkPerson: this.stockDialog.form.operator,
                checkRemark: this.stockDialog.form.remark,
              }
            }else {
              url = '/stock/entry/signalEntry'
              form = {
                purchaseItemId: this.stockDialog.form.itemId,
                entryNumber: this.stockDialog.form.number,
                entryTime: this.stockDialog.form.time,
                entryPerson: this.stockDialog.form.operator,
                entryRemark: this.stockDialog.form.remark,
              }
            }
            form.operator = getUser()
            postActionByQueryString(url, form)
              .then(resp => {
                this.$message({ type: 'success', message: resp.message })
                this.stockDialog.visible = false
                this.toSearch()
              })
          }else {
            console.log('error valid')
            return
          }
        })
      },
      showStockDialog(type, record) {
        this.stockDialog.title = type
        this.stockDialog.visible = true
        this.$set(this.stockDialog.form, 'number', record.number)
        this.$set(this.stockDialog.form, 'itemId', record.itemId)
      },
      showUploadModal() {
        this.uploadModal.visible = true
        this.uploadModal.title = this.contractInfoDialog.title+'上传'
      },
      uploadModalHandle(from) {
        this.$refs[addItemsForm].validate((valid) => {
          if (valid) {
            let url = ''
            let form = {}
            if (this.contractInfoDialog.title == '供货发票') {
              url = '/stock/invoice/invoiceUpload'
              form = {
                stockInvoice: this.uploadModal.form,
                files: this.fileList
              }
            }else {
              url = '/stock/actualAccount/addActualAccount'
              form = this.uploadModal.form
            }
            this.uploadModal.form.operator = getUser()
            this.uploadModal.form.contractId = this.contractAttribute.contractId
            postActionByJson(url, form).then(resp => {
              this.$message({ type:'success', message: resp.message })
              this.uploadModal.visible = false
              this.subFile(this.contractInfoDialog.title, this.contractAttribute)
            }).catch(() => {
              this.uploadModal.visible = false
            })
          }else {

          }
        })

      },
      subFile(type, record) {
        if (record.id) {
          this.contractInfoDialog.title = type
          this.contractInfoDialog.visible = true
          this.contractInfoDialog.tableLoading = true
          let url = null
          if (type == '供货发票') {
            url = '/stock/invoice/findInvoice'
          }else {
            url = '/stock/actualAccount/findByContractId'
          }
          getAction(url, { contractId: record.contractId})
            .then(resp => {
              this.contractInfoDialog.data = resp.data
              this.contractInfoDialog.tableLoading = false
            })
            .catch(() => {
              this.contractInfoDialog.tableLoading = false
            })
        }
      },
      showMoneyDialogInfo(){
        this.showMoneyDialog.visible = true
        getAction('/purchase/actualAccount/selectMoneyInfo',{contractId:this.searchForm.contractId})
        .then(resp =>{
          if (resp.data){
            this.moneyItems = resp.data
          }
        })
      },
      showAddDialog() {
        this.addMoneyDialog.visible = true
      },
  /**
       * 点击查询事件
       */
      toSearch() {
            // 查询合同订单信息
        let form = Object.assign({}, this.searchForm)
        if (form.time&&form.time.length>0) {
          form.startTime = form.time[0]
          form.endTime = form.time[1]
          this.$delete(form,'time')
        }
        if (this.searchForm.contractId){
            getAction('/stock/contractAttribute/findByContractId', form).then(resp => {
              if (resp.data) {
                this.contractAttribute = resp.data
                this.purchaseItems = []
              }
              // this.contractAttribute.contractName = contract.contractName
            })
        }
        getAction('/stock/contractAttribute/selectProjectInfo', form)
        .then(resp =>{
          if (resp.data){
            this.purchaseItems = resp.data
            this.contractAttribute = {}
          }
        })
      },
      /**
       * left-sider 收缩事件
       */
      changeMargin(){
        this.margin = this.margin == 0?-460-14:0
      },
      /**
       * 加载下拉框所有采购项目
       */
      loadPurchaseProjects() {
        getAction("/purchase/project/findAllLike")
          .then((resp) => {
            this.options.projects = resp.data
          })
      },
      // 查询合同列表
      loadContracts(proId) {
        if(proId){
        getAction('/purchase/contract/findByProjectId', { projectId: proId })
          .then(resp => {
            this.options.contracts = resp.data
          })
        }else {
          getAction('/purchase/contract/findByProjectId')
            .then(resp => {
              this.options.contracts = resp.data
            })
        }
      },
      proSelectChange(id) {
        this.$delete(this.searchForm,'contractId')
        this.loadContracts(id)
      },
      dateTimeFormat,
      beforeUpload,
      uploadStatusChange
    }
  }
</script>
<!--  css -->
<style lang="scss" scoped>
.equipment-list {

  .left-collapse{
    margin-left: 1em;
    margin-top: 1em;
    margin-right: 1em;
  }
  .left-layout{
    margin-top: 1em;
    margin-right: 1em;
  }
  /deep/.el-divider--horizontal {
    marign: 8px 0!important;
  }
  /deep/.el-form-item__content{
    height:auto;
    line-height:32px;
    margin-left:90px!important
  }
  .left-container {
    background: #fff;
    position: relative;
    .sider-btn {
      cursor: pointer;top:18px;position: absolute;font-size: 28px;color:#73767b;
    }
    .el-icon-s-fold {
      right: 0px;
    }
    .el-icon-s-unfold {
      top: -6px;
      right: -57px;
      border: 1px dashed #d5d5d5;
      background: #fff;
    }
    .attr-row {
      .el-col {
        text-align: center;
        span {
          cursor: pointer;
        }
      }
    }
  }

}
/deep/.el-picker-panel {
  z-index: 2900!important
}
</style>

